<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>个人记帐</title>
<link rel="stylesheet" type="text/css" href="css/reset.css"/>
<link rel="stylesheet" type="text/css" href="css/core.css"/>
<link rel="stylesheet" type="text/css" href="css/tabs.css"/>
<!-- 数字键盘样式  开始了  -->
<link rel="stylesheet" type="text/css" href="css/key.css"/>
<!-- 数字键盘样式 结束了  -->

<script type="text/javascript" src="js/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/num.js"></script>

<script type="text/javascript">
	function changeColor(obj,color){
		obj.bgColor = color ;
	}
</script>


<!--  头部导航 start  -->
<script type="text/javascript">

$(function(e){
	
	var startTop = $("#top_nav_fixed").offset().top;
	
	
		
	$(window).scroll(function(e){
		
		var scrollLong = $(document).scrollTop();
		
		if(scrollLong > 27){
			
			$("#top_nav_fixed").css("position","fixed");
			$("#top_nav_fixed").css("top","0");
			
		}else if(scrollLong <=27){
			$("#top_nav_fixed").css("position","fixed");
			$("#top_nav_fixed").css("top","");
			$("#top_nav_fixed").css("top","27");			
		}
	});	
});
</script>   <!--  头部导航 end  -->

</head>

<body>

<!-- 顶端top头开始-->
<div class="top">
	<div>
    	<ul>
        	<li class="top_regist"><a href="#">注册</a></li>
            <li><a href="#">登陆</a><span>|</span></li>
            <li><a href="#">帮助</a><span>|</span></li>
            <li><a href="#">贷款</a><span>|</span></li>
            <li><a href="#">理财</a><span>|</span></li>
           	<li><a href="#">记账</a><span>|</span></li>
        	<li><a href="#"><img src="image/icon/home.png"/>首页</a><span>|</span></li>       
      </ul>  
  </div>



</div>
<!-- 顶端top头结束-->


<!-- 中部 -->
<div class="wrap">
	<!-- 头部导航区 -->
	<div class="nav" id="top_nav_fixed">
    	<div class="nav_left">
        	<img src="image/logo_core.png"/>      	
        </div>
    	<div class="nav_right">
        	<ul>
            	<li><a href="#">社区</a></li>
                 <li><a href="#">报表</a></li>
                <li><a href="#">账户</a></li>
                <li><a href="#">记账</a></li> 
            	<li><a href="#">概览</a></li>
             	
             
             
                
            </ul>       
        </div>
    </div><!-- 头部导航区结-->
    
    <!-- 内容区 start -->
    <div class="content">
    	<!-- tab container  开始   -->
         <div id="notice" class="notice">
            <!-- tab卡开始 -->
            <div id="notice-tit" class="notice-tit">
                <ul>
                    <li ><a href="#">支出</a></li>
                    <li><a href="#">收入</a></li>
                    <li><a href="#">转账</a></li>
                    <li><a href="#">借入</a></li>
                    <li><a href="#">借出</a></li>
                    <li><a href="#">还款</a></li>
                    <li><a href="#">收债</a></li>
                </ul>
            </div><!-- tab卡结束 -->
            <!-- tab内容开始 -->
            <div id="notice-con" class="notice-con">
            	<!-- 支出开始 -->
                <div class="mod" style="display:none;">
                  
                    <label>
                    	分类<select name="" style="width:150px;height:30px;">
                        	  <option value="">衣服饰品</option>
                              <option value="">食品酒水</option>
                              <option value="">居家物业</option>
                           </select>
                    </label>
                    <label>
                    	账户<select name="" style="width:150px;height:30px;">
                        	  <option value="">现金</option>
                              <option value="">银行卡</option>
                              <option value="">应付款项</option>
                              <option value="">应收款项</option>
                              <option value="">余额宝</option>  
                           </select>
                    </label>
                    <label>
                    	金额<input name="" id="txtPwd" readonly style="width:150px;height:20px;"/>
<input type="button" value="软键盘" onclick="showKey(event)" />	

<p id="dKey"></p>
                    </label>
                    <label>
                    	时间<input type="text" name="" class="sang_Calender" style="width:150px;height:20px;"/>
                    </label>
                    <br />
                    <label>
                    	备注<input type="text" name="" style="width:524px;height:20px;"/>
                    </label>
                    <label>
                    	<input type="button" value="保存" style="width:80px;height:30px;margin-left:30px;"/>
                    </label>
                 
                </div><!-- 支出结束 -->
                <!-- 收入开始 -->
                
                <div class="mod"  style="display:none;">
                    
                 
                    <label>
                    	分类<select name="" style="width:150px;height:30px;">
                        	  <option value="">职业收入</option>
                              <option value="">其他收入</option>   
                           </select>
                    </label>
                    <label>
                    	账户<select name="" style="width:150px;height:30px;">
                        	  <option value="">现金</option>
                              <option value="">银行卡</option>
                              <option value="">应付款项</option>
                              <option value="">应收款项</option>
                              <option value="">余额宝</option>  
                           </select>
                    </label>
                    <label>
                    	 金额<input name="" id="shouru" readonly style="width:150px;height:20px;"/>
<input type="button" value="软键盘" onclick="showKey1(event)" />	
<p id="shouruKey"></p>
                    </label>
                    <label>
                    	时间<input type="text" name="" class="sang_Calender" style="width:150px;height:20px;"/>
                    </label>
                    <br />
                    <label>
                    	备注<input type="text" name="" style="width:524px;height:20px;"/>
                    </label>
                    <label>
                    	<input type="button" value="保存" style="width:80px;height:30px;margin-left:30px;"/>
                    </label>  
                </div> <!-- 收入结束 -->
                
                <!-- 转账开始  -->
                <div class="mod"  style="display:none;">
                   
                 
                    <label>
                    	转出<select name="" style="width:150px;height:30px;">
                        	  <option value="">现金</option>
                              <option value="">银行卡</option>
                              <option value="">应付款项</option>
                              <option value="">应收款项</option>
                              <option value="">余额宝</option>  
                           </select>
                    </label>
                    <label>
                    	转出<select name="" style="width:150px;height:30px;">
                        	  <option value="">现金</option>
                              <option value="">银行卡</option>
                              <option value="">应付款项</option>
                              <option value="">应收款项</option>
                              <option value="">余额宝</option>  
                           </select>
                    </label>
                    <label>
                    	 金额<input name="" id="transfer" readonly style="width:150px;height:20px;"/>
<input type="button" value="软键盘" onclick="showKey2(event)" />	
<p id="transferKey"></p>
                    </label>
                    <label>
                    	时间<input type="text" name="" class="sang_Calender" style="width:150px;height:20px;"/>
                    </label>
                    <br />
                    <label>
                    	备注<input type="text" name="" style="width:524px;height:20px;"/>
                    </label>
                    <label>
                    	<input type="button" value="保存" style="width:80px;height:30px;margin-left:30px;"/>
                    </label>  
                </div>  <!-- 转账结束  -->
                
                <!-- 借入开始 -->
                <div class="mod"  style="display:none;">
                 
                 	 
                    <label>
                    	负债账户<select name="" style="width:150px;height:30px;">
                        	  <option value="">应付款项</option>  
                           </select>
                    </label>
                    <label>
                    	存入账户<select name="" style="width:150px;height:30px;">
                        	  <option value="">现金</option>
                              <option value="">银行卡</option>
                              <option value="">应付款项</option>
                              <option value="">应收款项</option>
                              <option value="">余额宝</option>  
                           </select>
                    </label>
                    <label>
                    	 金额<input name="" id="jieru" readonly style="width:150px;height:20px;"/>
<input type="button" value="软键盘" onclick="showKey3(event)" />	
<p id="jieruKey"></p>
                    </label>
                    <label>
                    	时间<input type="text" name="" class="sang_Calender" style="width:150px;height:20px;"/>
                    </label>
                    <br />
                    <label>
                    	备注<input type="text" name="" style="width:524px;height:20px;"/>
                    </label>
                    <label>
                    	<input type="button" value="保存" style="width:80px;height:30px;margin-left:30px;"/>
                    </label>  

                </div> <!--  借入结束  -->
                <!-- 借出开始  -->
                 <div class="mod"  style="display:none;">
                      <label>
                    	转出账户<select name="" style="width:150px;height:30px;">
                        	    <option value="">现金</option>
                              <option value="">银行卡</option>
                              <option value="">应付款项</option>
                              <option value="">应收款项</option>
                              <option value="">余额宝</option>  
                           </select>
                    </label>
                    <label>
                    	债权账户<select name="" style="width:150px;height:30px;">
                              <option value="">应收款项</option>            
                           </select>
                    </label>
                    <label>
                    	 金额<input name="" id="jiecu" readonly style="width:150px;height:20px;"/>
<input type="button" value="软键盘" onclick="showKey4(event)" />	
<p id="jiecuKey"></p>
                    </label>
                    <label>
                    	时间<input type="text" name="" class="sang_Calender" style="width:150px;height:20px;"/>
                    </label>
                    <br />
                    <label>
                    	备注<input type="text" name="" style="width:524px;height:20px;"/>
                    </label>
                    <label>
                    	<input type="button" value="保存" style="width:80px;height:30px;margin-left:30px;"/>
                    </label>  

                </div> <!-- 借出结束  -->
                
                <!--  还款开始  -->
                 <div class="mod"  style="display:none;">
                       <label>
                    	转出账户<select name="" style="width:150px;height:30px;">
                        	    <option value="">现金</option>
                              <option value="">银行卡</option>
                              <option value="">应付款项</option>
                              <option value="">应收款项</option>
                              <option value="">余额宝</option>  
                           </select>
                    </label>
                    <label>
                    	负债账户<select name="" style="width:150px;height:30px;">
                              <option value="">应付款项</option>            
                           </select>
                    </label>
                    <label>
                    	 金额<input name="" id="huankuan" readonly style="width:150px;height:20px;"/>
<input type="button" value="软键盘" onclick="showKey5(event)" />	
<p id="huankuanKey"></p>
                    </label>
                    <label>
                    	时间<input type="text" name="" class="sang_Calender" style="width:150px;height:20px;"/>
                    </label>
                    <br />
                    <label>
                    	备注<input type="text" name="" style="width:524px;height:20px;"/>
                    </label>
                    <label>
                    	<input type="button" value="保存" style="width:80px;height:30px;margin-left:30px;"/>
                    </label>  

                </div>
                <!--  还款结束  -->
                
                <!--  收债开始 -->
                 <div class="mod"  style="display:none;">
                     <label>
                    	债权账户<select name="" style="width:150px;height:30px;">
                              <option value="">应收款项</option> 
                           </select>
                    </label>
                    <label>
                    	存入账户<select name="" style="width:150px;height:30px;">
                                  <option value="">现金</option>
                                  <option value="">银行卡</option>
                                  <option value="">应付款项</option>
                                  <option value="">应收款项</option>
                                  <option value="">余额宝</option>       
                           </select>
                    </label>
                    <label>
                    	 金额<input name="" id="souzai" readonly style="width:150px;height:20px;"/>
<input type="button" value="软键盘" onclick="showKey6(event)" />	
<p id="souzaiKey"></p>
                    </label>
                    <label>
                    	时间<input type="text" name="" class="sang_Calender" style="width:150px;height:20px;"/>
                    </label>
                    <br />
                    <label>
                    	备注<input type="text" name="" style="width:524px;height:20px;"/>
                    </label>
                    <label>
                    	<input type="button" value="保存" style="width:80px;height:30px;margin-left:30px;"/>
                    </label>  

                </div>  <!--  收债结束 -->
            </div> <!-- tab内容结束 -->
            
            <!-- 账目清单  开始 -->
            <div class="money_list">
            <h1>账目清单&nbsp;&nbsp;2017.03.01-2017.04.06</h1>
            <span>从<input type="text" name="" class="sang_Calender" style="width:150px;height:20px;"/>到<input type="text" name="" class="sang_Calender" style="width:150px;height:20px;"/>
            <input type="button" name="" value="确定"/>
            </span>
            	<table border="1" cellpadding="5" cellspacing="0" bgcolor="F2F2F2" width="100%" height="50px;" style="line-height:50px;">
	<tr onMouseOver="changeColor(this,'#8e8e8e')" onMouseOut="changeColor(this,'8e8e8e')" bgcolor="8e8e8e">
		<th style="text-align:center;"><span style="">编号</span></th>
		<th style="text-align:center;"><span class="STYLE10">分类</span></th>
		<th style="text-align:center;"><span class="STYLE10">&nbsp;&nbsp;</span></th>
		<th style="text-align:center;"><span class="STYLE10">金额</span></th>
		<th style="text-align:center;"><span class="STYLE10">账户</span></th>
		<th style="text-align:center;"><span class="STYLE10">备注</span></th>
	
	</tr>


	<tr onMouseOver="changeColor(this,'white')" onMouseOut="changeColor(this,'F2F2F2')">
		<td style="text-align:center;"><span class="STYLE6">张三</span></td>
		<td style="text-align:center;"><span class="STYLE6">张三</span></td>
		<td style="text-align:center;"><span class="STYLE6">张三</span></td>
		<td style="text-align:center;"><span class="STYLE6">张三</span></td>
		<td style="text-align:center;"><span class="STYLE6">张三</span></td>
		<td style="text-align:center;"><span class="STYLE6">张三</span></td>
		
		
	</tr>

</table>
    </div>   <!-- 账目清单  结束 -->
                
        </div>	<!-- tab container  结束   -->
    </div>  <!-- 内容区结束 -->
</div>  <!-- 中部结束 -->


<!--copyright开始-->
<div class="copyright clearfix" id="copyright">
  <div class="copyright_content">
    <ul>
      <li>关于
        <ul>
          <li>品牌故事</li>
          <li>联系我们</li>
          <li>加入我们</li>
          <li>版权声明</li>
        </ul>
      </li>
      <li>课程
        <ul>
          <li>PHP开发</li>
          <li>前端开发</li>
          <li>JAVA开发</li>
          <li>Android开发</li>
        </ul>
      </li>
      <li>关注
        <ul>
          <li>新浪微博</li>
          <li>腾讯微博</li>
          <li>企业微信</li>
          <li>QQ空间</li>
        </ul>
      </li>
      <li>留言
        <ul>
          <li>意见反馈</li>
          <li>问题留言</li>
          <li>媒体联络</li>
          <li>在线客服</li>
        </ul>
      </li>
      <li><img src="image/weixin.png" alt="微信关注" width="30" height="27" />微信关注
        <ul>
          <li><img src="image/qrcode.jpg" alt="扫描关官方微信" width="102" height="102" /></li>
        </ul>
      </li>
    </ul>
  </div>
  <!--copyright_content结束--> 
</div>  <!--copyright结束-->


<!-- tab 选项卡切换 start  -->
<script type="text/javascript" src="js/tabs.js"></script>


<script type="text/javascript" src="js/datetime.js"></script>









</body>
</html>
